<template>
  <div class="home">

    <van-swipe class="my-swipe"
               :autoplay="3000"
               indicator-color="white">
      <van-swipe-item v-for="item in carouseList"
                      :key="item.id"><img :src="item.img"
             alt=""></van-swipe-item>
    </van-swipe>

    <van-grid class="my-grids"
              :column-num="3">
      <van-grid-item v-for="grid in gridList"
                     :key="grid.id"
                     :icon="grid.src"
                     :text="grid.title"
                     :to="grid.to" />
    </van-grid>

  </div>
</template>

<script>
export default {
  data: () => ({
    carouseList: [],
    gridList: []
  }),
  created () {
    this.getCarousel()
    this.getGrids()
  },
  methods: {
    async getCarousel () {
      try {
        const res = await this.Api.getCarousel()
        const {
          data: { message }
        } = res
        this.carouseList = message
      } catch (error) {
        this.$Toast(error)
      }
    },
    async getGrids () {
      try {
        const res = await this.Api.getGrids()
        const {
          data: { message }
        } = res
        this.gridList = message
      } catch (error) {
        this.$Toast(error)
      }
    }
  }
}
</script>

<style lang="less">
.my-swipe .van-swipe-item {
  width: 100%;
  height: 200px;
  img {
    font-size: 0px;
    width: 100%;
    height: 100%;
  }
}
.my-grids {
  .van-grid-item__icon {
    font-size: 60px;
  }
}
</style>
